<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor 编辑器使用指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        .heading {
            font-family: 'Noto Serif SC', serif;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .os-card:hover {
            transform: scale(1.02);
        }
        .feature-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #667eea;
        }
        .table-container {
            overflow-x: auto;
            border-radius: 0.5rem;
        }
        table {
            min-width: 800px;
        }
        .footer {
            background-color: #1a202c;
        }
        .footer a:hover {
            color: #a0aec0;
        }
        .mermaid {
            background-color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            margin: 2rem 0;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 0.5rem;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="heading text-4xl md:text-5xl font-bold mb-4">Cursor 编辑器完整指南</h1>
                    <p class="text-xl mb-6 opacity-90">集 AI 功能与专业代码编辑于一身的新一代开发工具</p>
                    <div class="flex space-x-4">
                        <a href="#download" class="bg-white text-indigo-700 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition">立即下载</a>
                        <a href="#features" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">探索功能</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="mermaid w-full max-w-md">
                        graph TD
                            A[Cursor编辑器] --> B[AI辅助编程]
                            A --> C[智能补全]
                            A --> D[代码生成]
                            A --> E[错误诊断]
                            B --> F[上下文理解]
                            C --> G[语法感知]
                            D --> H[模板生成]
                            E --> I[即时修复]
                            F --> J[更准确的建议]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-6xl px-4 py-12">
        <!-- System Requirements -->
        <section id="requirements" class="mb-16">
            <h2 class="heading text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-laptop-code mr-3 text-indigo-600"></i>
                系统要求与下载
            </h2>
            <p class="text-lg text-gray-700 mb-6">在开始使用 Cursor 之前，需要了解其系统要求并从官方渠道获取安装包。</p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                <div class="os-card card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <i class="fab fa-windows text-3xl text-blue-500 mr-3"></i>
                        <h3 class="heading text-xl font-bold">Windows</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            Windows 10 (64位) 1809版本或更高
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            Windows 11 (64位) 所有版本
                        </li>
                        <li class="flex items-start text-gray-500">
                            <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
                            不支持Windows 7/8/8.1
                        </li>
                    </ul>
                </div>
                
                <div class="os-card card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <i class="fab fa-apple text-3xl text-gray-800 mr-3"></i>
                        <h3 class="heading text-xl font-bold">macOS</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            macOS 10.15 (Catalina) 或更高版本
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            支持 Intel 芯片和 Apple Silicon (M1/M2/M3) 芯片
                        </li>
                    </ul>
                </div>
                
                <div class="os-card card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <i class="fab fa-linux text-3xl text-orange-500 mr-3"></i>
                        <h3 class="heading text-xl font-bold">Linux</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            Ubuntu 18.04 LTS 或更高版本
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            Debian 10 或更高版本
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            其他基于 Debian 的发行版
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="card bg-white p-6 rounded-lg mb-8">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">硬件与网络环境需求</h3>
                <p class="text-gray-700 mb-4">为了获得最佳体验，建议满足以下硬件和网络条件：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-bold text-lg mb-2 text-gray-800">硬件最低要求：</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-microchip text-blue-500 mt-1 mr-2"></i>
                                处理器：双核处理器，2.0 GHz 或更高
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-memory text-purple-500 mt-1 mr-2"></i>
                                内存：至少 8 GB RAM（推荐 16 GB 或更高）
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-hdd text-green-500 mt-1 mr-2"></i>
                                存储空间：至少 1 GB 可用空间
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-desktop text-red-500 mt-1 mr-2"></i>
                                显示器：分辨率至少为 1280 x 720
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-bold text-lg mb-2 text-gray-800">推荐配置：</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-microchip text-blue-500 mt-1 mr-2"></i>
                                处理器：四核处理器或更高
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-memory text-purple-500 mt-1 mr-2"></i>
                                内存：16 GB RAM 或更高
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-hdd text-green-500 mt-1 mr-2"></i>
                                SSD 存储，至少 2 GB 可用空间
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-desktop text-red-500 mt-1 mr-2"></i>
                                全高清（1920 x 1080）或更高分辨率
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="mt-6">
                    <h4 class="font-bold text-lg mb-2 text-gray-800">网络要求：</h4>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-wifi text-indigo-500 mt-1 mr-2"></i>
                            稳定的互联网连接，用于 AI 功能和更新
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-tachometer-alt text-yellow-500 mt-1 mr-2"></i>
                            最低带宽：5 Mbps
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-bolt text-green-500 mt-1 mr-2"></i>
                            推荐带宽：20 Mbps 或更高，特别是频繁使用 AI 功能时
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-server text-blue-500 mt-1 mr-2"></i>
                            支持代理服务器配置（适用于企业环境）
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        
        <!-- Installation Section -->
        <section id="download" class="mb-16">
            <h2 class="heading text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-download mr-3 text-indigo-600"></i>
                安装流程详解
            </h2>
            
            <div class="card bg-white p-6 rounded-lg mb-8">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">安装步骤与常见问题</h3>
                <p class="text-gray-700 mb-6">以下是在各主要平台上安装 Cursor 的详细步骤：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-windows text-blue-500 mr-2"></i>
                            Windows 安装步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>访问 <a href="https://cursor.sh/" class="text-indigo-600 hover:underline">Cursor 官网</a>，点击"下载"按钮</li>
                            <li>选择 Windows 版本并下载安装程序（.exe 文件）</li>
                            <li>下载完成后，运行安装程序</li>
                            <li>按照安装向导的提示选择安装位置和附加选项</li>
                            <li>完成安装后，Cursor 会自动启动</li>
                        </ol>
                    </div>
                    
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-apple text-gray-800 mr-2"></i>
                            macOS 安装步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>访问 <a href="https://cursor.sh/" class="text-indigo-600 hover:underline">Cursor 官网</a>，点击"下载"按钮</li>
                            <li>选择 macOS 版本（会自动识别 Intel 或 Apple Silicon）</li>
                            <li>下载 .dmg 文件后，双击打开</li>
                            <li>将 Cursor 图标拖动到"应用程序"文件夹</li>
                            <li>从启动器或应用程序文件夹中启动 Cursor</li>
                            <li>首次启动时，可能需要通过右键点击应用并选择"打开"来绕过 macOS 安全限制</li>
                        </ol>
                    </div>
                    
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-linux text-orange-500 mr-2"></i>
                            Linux 安装步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>访问 <a href="https://cursor.sh/" class="text-indigo-600 hover:underline">Cursor 官网</a>，点击"下载"按钮</li>
                            <li>选择适合您发行版的包格式（.deb 或 .rpm）</li>
                            <li>下载完成后，使用包管理器安装：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    <p>对于 .deb 包：<br><span class="text-blue-600">sudo dpkg -i cursor_x.x.x_amd64.deb</span></p>
                                    <p class="mt-1">对于 .rpm 包：<br><span class="text-blue-600">sudo rpm -i cursor_x.x.x_x86_64.rpm</span></p>
                                </div>
                            </li>
                            <li>或者使用 AppImage 版本（提供直接运行的选项）</li>
                            <li>安装完成后，可以从应用程序菜单启动或通过终端运行 <code class="bg-gray-100 px-1 rounded">cursor</code> 命令</li>
                        </ol>
                    </div>
                </div>
                
                <h4 class="font-bold text-xl mb-4 text-gray-800">常见安装问题及解决方案</h4>
                <div class="table-container">
                    <table class="w-full border-collapse">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="p-3 text-left border-b border-gray-200">问题</th>
                                <th class="p-3 text-left border-b border-gray-200">可能原因</th>
                                <th class="p-3 text-left border-b border-gray-200">解决方案</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hover:bg-gray-50">
                                <td class="p-3 border-b border-gray-200">安装过程中出现"权限不足"错误</td>
                                <td class="p-3 border-b border-gray-200">用户账户没有管理员权限</td>
                                <td class="p-3 border-b border-gray-200">以管理员身份运行安装程序或使用 sudo（Linux/macOS）</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="p-3 border-b border-gray-200">macOS报告"无法验证开发者"</td>
                                <td class="p-3 border-b border-gray-200">安全设置限制</td>
                                <td class="p-3 border-b border-gray-200">在"系统偏好设置 > 安全性与隐私"中允许应用，或右键点击应用选择"打开"</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="p-3 border-b border-gray-200">Linux依赖项缺失</td>
                                <td class="p-3 border-b border-gray-200">系统缺少必要库</td>
                                <td class="p-3 border-b border-gray-200">
                                    <div class="bg-gray-100 p-2 rounded font-mono text-sm">
                                        sudo apt-get install libgtk-3-0 libnotify4 libnss3 libxss1 libxtst6 xdg-utils libatspi2.0-0 libuuid1 libsecret-1-0
                                    </div>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="p-3 border-b border-gray-200">Windows防病毒软件拦截</td>
                                <td class="p-3 border-b border-gray-200">误报</td>
                                <td class="p-3 border-b border-gray-200">在防病毒软件中添加例外或临时禁用防病毒软件</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="p-3">安装后找不到程序</td>
                                <td class="p-3">安装路径问题</td>
                                <td class="p-3">检查默认安装位置或使用系统搜索功能</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="card bg-white p-6 rounded-lg">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">卸载与重装指南</h3>
                <p class="text-gray-700 mb-6">有时您可能需要卸载并重新安装 Cursor，以下是正确的操作步骤：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-windows text-blue-500 mr-2"></i>
                            Windows 卸载步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>打开"控制面板" > "程序" > "程序和功能"</li>
                            <li>找到 Cursor 应用，右键点击选择"卸载"</li>
                            <li>按照卸载向导完成删除</li>
                            <li>完全卸载后，可以删除残留文件：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    <p>删除 <span class="text-blue-600">%APPDATA%\Cursor</span> 文件夹</p>
                                    <p class="mt-1">删除 <span class="text-blue-600">%USERPROFILE%\.cursor</span> 文件夹</p>
                                </div>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-apple text-gray-800 mr-2"></i>
                            macOS 卸载步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>从"应用程序"文件夹中将 Cursor 拖到"废纸篓"</li>
                            <li>清空废纸篓</li>
                            <li>删除配置文件（可选）：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    <p>打开终端，运行 <span class="text-blue-600">rm -rf ~/Library/Application\ Support/Cursor</span></p>
                                    <p class="mt-1">运行 <span class="text-blue-600">rm -rf ~/.cursor</span></p>
                                </div>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="card p-4 rounded-lg border border-gray-200">
                        <h4 class="font-bold text-lg mb-3 text-gray-800 flex items-center">
                            <i class="fab fa-linux text-orange-500 mr-2"></i>
                            Linux 卸载步骤
                        </h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>对于 .deb 包安装：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    sudo apt-get remove cursor
                                </div>
                            </li>
                            <li>对于 .rpm 包安装：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    sudo rpm -e cursor
                                </div>
                            </li>
                            <li>对于 AppImage：直接删除 AppImage 文件</li>
                            <li>删除配置文件：
                                <div class="bg-gray-100 p-2 rounded mt-2 font-mono text-sm">
                                    rm -rf ~/.config/Cursor ~/.cursor
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
                
                <h4 class="font-bold text-xl mb-2 text-gray-800">重装建议</h4>
                <ul class="space-y-2 text-gray-700">
                    <li class="flex items-start">
                        <i class="fas fa-sync-alt text-blue-500 mt-1 mr-2"></i>
                        卸载后重启系统，确保所有进程完全终止
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-cloud-download-alt text-green-500 mt-1 mr-2"></i>
                        重新安装前清除浏览器缓存，确保下载最新版本
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-save text-purple-500 mt-1 mr-2"></i>
                        安装新版本前，备份任何自定义设置或插件配置
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-map-marker-alt text-red-500 mt-1 mr-2"></i>
                        对于问题持续存在的情况，考虑使用不同的安装位置
                    </li>
                </ul>
            </div>
        </section>
        
        <!-- Initial Configuration -->
        <section id="configuration" class="mb-16">
            <h2 class="heading text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-cog mr-3 text-indigo-600"></i>
                初始配置与个性化
            </h2>
            
            <div class="card bg-white p-6 rounded-lg mb-8">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">账户设置与API密钥配置</h3>
                <p class="text-gray-700 mb-6">首次启动 Cursor 时，您需要进行一些初始设置：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">账户创建与登录</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>在首次启动界面，选择"创建账户"或"登录"</li>
                            <li>使用电子邮件注册新账户，或通过 Google、GitHub 等第三方登录</li>
                            <li>完成验证步骤，确认您的账户</li>
                        </ol>
                    </div>
                    
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">API 密钥配置（用于增强 AI 功能）</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>打开 Cursor 后，进入"设置"</li>
                            <li>在左侧菜单中，找到Models设置"选项</li>
                            <li>在相应字段中输入您的 API 密钥（如 OpenAI API 密钥）</li>
                            <li>如果您没有密钥，也可以使用 Cursor 默认提供的服务</li>
                        </ol>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold text-lg mb-3 text-gray-800">AI 模型选择</h4>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-brain text-purple-500 mt-1 mr-2"></i>
                            在 AI 设置中，选择您希望使用的默认 AI 模型
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-robot text-blue-500 mt-1 mr-2"></i>
                            可选择的模型包括 GPT-4、Claude 等，具体取决于您的订阅级别
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-tasks text-green-500 mt-1 mr-2"></i>
                            对于不同任务，可以设置不同的默认模型
                        </li>
                    </ul>
                </div>
                
                <div class="mt-6">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744558034951-833d28c1-c7c8-4550-8722-ff7abea52aa4.png" alt="API 密钥配置界面" class="rounded-lg shadow-md w-full max-w-2xl mx-auto">
                </div>
            </div>
            
            <div class="card bg-white p-6 rounded-lg">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">界面与主题定制</h3>
                <p class="text-gray-700 mb-6">Cursor 提供了丰富的界面自定义选项，让您可以创建舒适的编码环境：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">主题设置</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>打开设置，选择"主题"或"颜色主题"</li>
                            <li>从内置主题中选择，如暗色主题、亮色主题等</li>
                            <li>也可以安装 VSCode 兼容的主题扩展</li>
                            <li>推荐主题：
                                <ul class="list-disc list-inside mt-2 pl-4">
                                    <li>Monokai Pro（适合长时间编码）</li>
                                    <li>GitHub Theme（清晰的语法高亮）</li>
                                    <li>Dracula（深色主题，降低眼睛疲劳）</li>
                                    <li>Nord（柔和的配色方案）</li>
                                </ul>
                            </li>
                        </ol>
                    </div>
                    
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">字体与编辑器自定义</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>在设置中选择"文本编辑器"</li>
                            <li>修改字体系列、大小和行高</li>
                            <li>推荐编程字体：
                                <ul class="list-disc list-inside mt-2 pl-4">
                                    <li>JetBrains Mono</li>
                                    <li>Fira Code（带连字）</li>
                                    <li>Cascadia Code</li>
                                    <li>Hack</li>
                                </ul>
                            </li>
                        </ol>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h4 class="font-bold text-lg mb-3 text-gray-800">布局调整</h4>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-columns text-blue-500 mt-1 mr-2"></i>
                            调整面板位置：拖动面板标题可以重新排列或分离面板
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-eye-slash text-purple-500 mt-1 mr-2"></i>
                            启用/禁用活动栏、状态栏和其他界面元素
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-expand-arrows-alt text-green-500 mt-1 mr-2"></i>
                            配置编辑器组布局（水平/垂直分割）
                        </li>
                    </ul>
                </div>
                
                <div class="mb-6">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744558159908-ce565cdb-c02c-4625-9c51-f1f93c9d1f78.png" alt="编辑器布局示例" class="rounded-lg shadow-md w-full max-w-2xl mx-auto">
                </div>
                
                <div>
                    <h4 class="font-bold text-lg mb-3 text-gray-800">个性化设置示例（settings.json）</h4>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm"><code>{
  "editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "workbench.colorTheme": "Dracula",
  "workbench.iconTheme": "material-icon-theme",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.bracketPairColorization.enabled": true
}</code></pre>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Migration Section -->
        <section id="migration" class="mb-16">
            <h2 class="heading text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-exchange-alt mr-3 text-indigo-600"></i>
                从其他编辑器迁移
            </h2>
            
            <div class="card bg-white p-6 rounded-lg mb-8">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">VSCode设置迁移</h3>
                <p class="text-gray-700 mb-6">由于 Cursor 基于 VSCode 构建，迁移过程非常简单：</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">设置与偏好迁移</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>在 VSCode 中，通过 <code class="bg-gray-100 px-1 rounded">Ctrl+Shift+P</code> 或 <code class="bg-gray-100 px-1 rounded">Cmd+Shift+P</code> 打开命令面板</li>
                            <li>输入 "settings" 并选择 "首选项: 打开设置 (JSON)"</li>
                            <li>复制整个 JSON 内容</li>
                            <li>在 Cursor 中同样打开设置 JSON 文件，并粘贴内容</li>
                            <li>保存文件，设置将立即生效</li>
                        </ol>
                    </div>
                    
                    <div>
                        <h4 class="font-bold text-lg mb-3 text-gray-800">插件迁移</h4>
                        <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                            <li>在 VSCode 中，查看已安装的扩展列表</li>
                            <li>在 Cursor 中打开扩展视图（侧边栏中的方块图标）</li>
                            <li>搜索并安装您在 VSCode 中使用的相同扩展</li>
                            <li>Cursor 支持大多数 VSCode 扩展，但某些与编辑器核心深度集成的扩展可能需要调整</li>
                        </ol>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold text-lg mb-3 text-gray-800">键盘快捷键迁移</h4>
                    <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                        <li>从 VSCode 导出键盘快捷键（通过文件 > 首选项 > 键盘快捷方式）</li>
                        <li>在 Cursor 中导入这些快捷键设置</li>
                        <li>检查并调整任何冲突的快捷键，特别是与 AI 功能相关的快捷键</li>
                    </ol>
                </div>
                
                <div class="mt-6">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744558297009-162b9438-669d-485f-bd17-a4cbb0c9e629.png" alt="扩展视图" class="rounded-lg shadow-md w-full max-w-2xl mx-auto">
                </div>
            </div>
            
            <div class="card bg-white p-6 rounded-lg mb-8">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">JetBrains工具转换</h3>
                <p class="text-gray-700 mb-6">从 IntelliJ IDEA、PyCharm 等 JetBrains 工具迁移到 Cursor 需要一些调整：</p>
                
                <div class="mb-6">
                    <h4 class="font-bold text-lg mb-3 text-gray-800">键盘快捷键适应</h4>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-keyboard text-blue-500 mt-1 mr-2"></i>
                            Cursor 提供了 JetBrains 键盘映射方案，可在设置中选择
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-purple-500 mt-1 mr-2"></i>
                            常用操作对比：
                        </li>
                    </ul>
                    
                    <div class="table-container mt-2">
                        <table class="w-full border-collapse">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="p-3 text-left border-b border-gray-200">JetBrains 操作</th>
                                    <th class="p-3 text-left border-b border-gray-200">JetBrains 快捷键</th>
                                    <th class="p-3 text-left border-b border-gray-200">Cursor 对应快捷键</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="hover:bg-gray-50">
                                    <td class="p-3 border-b border-gray-200">查找操作</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+Shift+A</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+Shift+P</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="p-3 border-b border-gray-200">查找文件</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+Shift+N</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+P</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="p-3 border-b border-gray-200">查找符号</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+Alt+Shift+N</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+T</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="p-3 border-b border-gray-200">重构操作</td>
                                    <td class="p-3 border-b border-gray-200">Ctrl+Alt+Shift+T</td>
                                    <td class="p-3 border-b border-gray-200">右键菜单或 AI 辅助</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="p-3">调试程序</td>
                                    <td class="p-3">Shift+F9</td>
                                    <td class="p-3">F5 (带调试)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold text-lg mb-3 text-gray-800">功能对应关系</h4>
                    <ul class="space-y-2 text-gray-700 list-disc list-inside pl-4">
                        <li>JetBrains 的"项目"视图对应 Cursor 的"资源管理器"</li>
                        <li>JetBrains 的"结构"视图对应 Cursor 的"大纲"</li>
                        <li>JetBrains 的"意图操作"对应 Cursor 的"快速修复"和 AI 辅助功能</li>
                        <li>JetBrains 的深度代码分析功能可通过 Cursor 的 AI 功能和特定扩展获得</li>
                    </ul>
                </div>
            </div>
            
            <div class="card bg-white p-6 rounded-lg">
                <h3 class="heading text-2xl font-bold mb-4 text-gray-800">Sublime Text习惯适应</h3>
                <p class="text-gray-700 mb-6">Sublime Text 用户迁移到 Cursor 的适应指南：</p>
                
                <div class="mb-6">
                    <h4 class="font-bold text-lg mb-3 text-gray-800">快捷键与功能映射</h4>
                    <ol class="space-y-2 text-gray-700 list-decimal list-inside">
                        <li>多光标编辑：
                            <ul class="list-disc list-inside pl-4 mt-1">
                                <li>Sublime: <code class="bg-gray-100 px-1 rounded">Ctrl+D</code> 选择下一个匹配项</li>
                                <li>Cursor: <code class="bg-gray-100 px-1 rounded">Ctrl+D</code> 或 <code class="bg-gray-100 px-1 rounded">Cmd+D</code> 行为相同</li>
                            </ul>
                        </li>
                        <li>命令面板：
                            <ul class="list-disc list-inside pl-4 mt-1">
                                <li>Sublime: <code class="bg-gray-100 px-1 rounded">Ctrl+Shift+P</code></li>
                                <li>Cursor: <code class="bg-gray-100 px-1 rounded">Ctrl+Shift+P</code> 或 <code class="bg-gray-100 px-1 rounded">Cmd+Shift+P</code>（相同）</li>
                            </ul>
                        </li>
                        <li>转到任何内容：
                            <ul class="list-disc list-inside pl-4 mt-1">
                                <li>Sublime: <code class="bg-gray-100 px-1 rounded">Ctrl+P</code></li>
                                <li>Cursor: <code class="bg-gray-100 px-1 rounded">Ctrl+P</code> 或 <code class="bg-gray-100 px-1 rounded">Cmd+P</code>（相同）</li>
                            </ul>
                        </li>
                        <li>其他常用功能：
                            <div class="table-container mt-2">
                                <table class="w-full border-collapse">
                                    <thead class="bg-gray-100">
                                        <tr>
                                            <th class="p-3 text-left border-b border-gray-200">Sublime 功能</th>
                                            <th class="p-3 text-left border-b border-gray-200">Sublime 快捷键</th>
                                            <th class="p-3 text-left border-b border-gray-200">Cursor 对应快捷键</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="hover:bg-gray-50">
                                            <td class="p-3 border-b border-gray-200">转到行</td>
                                            <td class="p-3 border-b border-gray-200">Ctrl+G</td>
                                            <td class="p-3 border-b border-gray-200">Ctrl+G</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="p-3 border-b border-gray-200">选择整行</td>
                                            <td class="p-3 border-b border-gray-200">Ctrl+L</td>
                                            <td class="p-3 border-b border-gray-200">Ctrl+L</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="p-3 border-b border-gray-200">分割为多个选区</td>
                                            <td class="p-3 border-b border-gray-200">Alt+Shift+I</td>
                                            <td class="p-3 border-b border-gray-200">Shift+Alt+I</td>
                                        </tr>
                                        <tr class="hover:bg-gray-50">
                                            <td class="p-3">注释/取消注释</td>
                                            <td class="p-3">Ctrl+/</td>
                                            <td class="p-3">Ctrl+/</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </li>
                    </ol>
                </div>
                
                <div>
                    <h4 class="font-bold text-lg mb-3 text-gray-800">插件替代</h4>
                    <ul class="space-y-2 text-gray-700 list-disc list-inside pl-4">
                        <li>Sublime 的 Package Control → Cursor 的扩展市场</li>
                        <li>Emmet → Cursor 内置或扩展市场中的 Emmet</li>
                        <li>SublimeLinter → Cursor 内置的代码检查 + ESLint/其他linter扩展</li>
                        <li>GitGutter → Cursor 内置的 Git 功能</li>
                    </ul>
                </div>
            </div>
        </section>
        
        <!-- Network Section -->
        <section id="network" class="mb-16">
            <h2 class="heading text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-network-wired mr-3 text-indigo-600"></i>
                网络与代理设置
            </h2>
            
            <div class="card bg-white p-6 rounded-lg">
                <p class="text-gray-700 mb-6">对于某些网络环境，特别是企业内网或特定地区，可能需要配置代理设置以确保 Cursor 的所有功能正常工作。</p>
                
                <div class="mb-6">
                    <h3 class="heading text-2xl font-bold mb-4 text-gray-800">API访问优化</h3>
                    <p class="text-gray-700 mb-4">为了获得更好的 AI 服务性能，您可以优化 API 访问设置：</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="card p-4 rounded-lg border border-gray-200">
                            <h4 class="font-bold text-lg mb-3 text-gray-800">AI 服务端点配置</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-server text-blue-500 mt-1 mr-2"></i>
                                    在设置中找到 Models 服务相关选项
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-exchange-alt text-purple-500 mt-1 mr-2"></i>
                                    如果默认端点响应缓慢，可以尝试配置备用端点
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-clock text-green-500 mt-1 mr-2"></i>
                                    调整超时设置，增加复杂请求的处理时间
                                </li>
                            </ul>
                        </div>
                        
                        <div class="card p-4 rounded-lg border border-gray-200">
                            <h4 class="font-bold text-lg mb-3 text-gray-800">缓存设置</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-database text-blue-500 mt-1 mr-2"></i>
                                    启用 AI 响应缓存可以提高重复查询的速度
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-search text-purple-500 mt-1 mr-2"></i>
                                    在设置中搜索 "cache" 或 "缓存"
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-sliders-h text-green-500 mt-1 mr-2"></i>
                                    根据本地存储空间和性能需求，调整缓存大小
                                </li>
                            </ul>
                        </div>
                        
                        <div class="card p-4 rounded-lg border border-gray-200">
                            <h4 class="font-bold text-lg mb-3 text-gray-800">断网模式优化</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-wifi-slash text-blue-500 mt-1 mr-2"></i>
                                    设置中开启 "离线工作模式"，减少对在线服务的依赖
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-download text-purple-500 mt-1 mr-2"></i>
                                    下载必要的语言服务器和文档，以便离线使用
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-microchip text-green-500 mt-1 mr-2"></i>
                                    配置本地模型（如果支持）以在网络不稳定时提供基本的 AI 辅助
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="footer text-white py-8">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-lg">技术小馆</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition">http://www.yuque.com/jtostring</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>